<template>
  <div class="details">
    <details-bar-top ref="bar" class="bar-top" @indexIng="indexIng" />
    <bs-scroll
      class="text"
      ref="bsScroll"
      @scrollClick="scrollClick"
      :probe-type="3"
    >
      <detail-swiper :top-img="topImg" />
      <detail-base-info :goods="goods" />
      <detail-store-info :shop="shop" />
      <details-img-info :detailImgInfo="detailImgInfo" @imgLoad="imgLoad" />
      <details-good-size ref="goodSize" :good-sizes="goodSizes" />
      <details-content-info ref="content" :content-info="contentInfo" />
      <good-list ref="goodList" :goods="recommend" />
    </bs-scroll>
    <details-bottom @clickOk="clickOk" />
    <back-top @click.native="backClick" v-show="isShow" />
  </div>
</template>

<script>
// 复用的组件（推荐数据的展示）
// 防抖函数和时间格式转换的封装复用
import GoodList from "components/content/goodList/GoodList";
import { debounce } from "common/utils";
// 顶部tab栏组件
// 轮播图组件
// 商品信息
// 店铺信息
// 卖家秀
// 商品尺码详情
// 商品评价
// 底部tab栏
// 混入
import DetailsBarTop from "./detailsBar/DetailsBarTop";
import DetailSwiper from "./detailsBar/DetailSwiper";
import DetailBaseInfo from "./detailsBar/DetailsBaseInfo";
import DetailStoreInfo from "./detailsBar/DetailsStoreInfo";
import DetailsImgInfo from "./detailsBar/DetailsImgInfo";
import DetailsGoodSize from "./detailsBar/DetailsGoodSizes";
import DetailsContentInfo from "./detailsBar/DetailsContentInfo";
import DetailsBottom from "./detailsBar/DetailsBottom";
import { imgItemLoad, backTop } from "common/mixin";

// 滚动组件
import BsScroll from "components/common/bsscroll/BsScroll";

// vuex的actions方法映射过来
import { mapActions } from "vuex";

// 网络请求（axios）
import {
  detailsImg,
  Goods,
  shop,
  GoodsParam,
  getRecommend,
} from "network/details.js";

export default {
  name: "Details",
  data() {
    return {
      // id
      iid: 0,
      // 存储轮播图片数据
      topImg: [],
      // 存储商品数据
      goods: {},
      // 店铺信息
      shop: {},
      // 商品图片详情
      detailImgInfo: {},
      // 商品尺码详情
      goodSizes: {},
      // 商品评价数据
      contentInfo: {},
      // 推荐数据
      recommend: [],
      // tab栏点击后滚动
      clickScroll: [],
      // 实现防抖
      antiShake: null,
      // 监听滚动的位置
      positionIng: 0,
      // 监听当前的i
      isi: 0,
    };
  },
  components: {
    DetailsBarTop,
    DetailSwiper,
    DetailBaseInfo,
    DetailStoreInfo,
    DetailsImgInfo,
    DetailsGoodSize,
    DetailsContentInfo,
    DetailsBottom,
    GoodList,
    detailsImg,
    BsScroll,
  },
  created() {
    // 组件被创建立即保存id
    this.iid = this.$route.params.iid;
    // 发送ajax 获取商品数据
    detailsImg(this.iid).then(({ data: res }) => {
      const data = res.result;
      this.topImg = res.result.itemInfo.topImages;
      // 把需要的数据用对象存储
      this.goods = new Goods(
        data.itemInfo,
        data.columns,
        data.shopInfo.services
      );
      // 店铺信息
      this.shop = new shop(data.shopInfo);
      // 商品图片详情
      this.detailImgInfo = data.detailInfo;
      // 商品质量，尺码详情
      this.goodSizes = new GoodsParam(
        data.itemParams.info,
        data.itemParams.rule
      );
      // 商品评价数据
      if (data.rate.cRate !== 0) {
        this.contentInfo = data.rate.list[0];
      }
    });
    // 获取推荐数据
    getRecommend().then(({ data: res }) => {
      this.recommend = res.data.list;
    });
    // 防抖实现
    this.antiShake = debounce(() => {
      this.$refs.bsScroll.refresh();
      this.clickScroll = [];
      this.clickScroll.push(0);
      this.clickScroll.push(this.$refs.goodSize.$el.offsetTop);
      this.clickScroll.push(this.$refs.content.$el.offsetTop);
      this.clickScroll.push(this.$refs.goodList.$el.offsetTop);
      this.clickScroll.push(Number.MAX_VALUE);
    });
  },
  // 混入（解决代码的复用性）
  mixins: [imgItemLoad, backTop],
  // 该钩子函数配合keep-alive来使用，
  // 使用了keep-alive就不会调用beforeDestory和destoryed钩子了，
  // 因为组件没有被销毁，而是被缓存起来了，
  // 所以deactivated钩子可以看做是beforeDestory和destoryed的替代。
  deactivated() {
    this.$bus.$off("imgItemLoad", this.itemLoad);
  },
  methods: {
    // vuex的actions的方法映射过来
    ...mapActions(["addCart"]),

    // 卖家秀图片加载后发出的事件
    imgLoad() {
      // 经过了防抖函数
      this.antiShake();
    },
    // 点击跳转到指定的位置
    indexIng(index) {
      this.$refs.bsScroll.scroll(0, -this.clickScroll[index], 300);
    },
    // 滚动时监听位置选择指定图标
    scrollClick(position) {
      let length = this.clickScroll.length;
      for (let i = 0; i < length - 1; i++) {
        if (
          this.positionIng != i &&
          i < length - 1 &&
          -position >= this.clickScroll[i] &&
          -position < this.clickScroll[i + 1]
        ) {
          this.positionIng = i;
          this.$refs.bar.indexClick = i;
        }
      }
      this.isShow = -position > 1000;
    },

    // 监听到加入购物车的点击事件
    clickOk() {
      const product = {};
      product.image = this.topImg[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrice;
      product.iid = this.iid;
      this.addCart(product).then((res) => {
        this.$prompt.show(res);
      });
    },
  },
};
</script>

<style scoped>
.details {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}

.text {
  height: calc(100% - 44px - 49px);
  overflow: hidden;
}

.bar-top {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>